<style>
.ivu-table .tableCellLeft {
  text-align: left;
}
.divItemImg {
  width: 100%;
  height: 600px;
  text-align: center;
}
.itemImg {
  max-width: 100%;
  max-height: 600px;
}
</style>
<template>
  <div>
    <Card ref="card">
      <p slot="title">
        农村幸福院评定详情- {{ name }}
        <Rate v-model="xfyinfo.AssessLevel" :count="3" :disabled="true" />
        <Tag :color="isStanard ? 'success' : 'error'">{{
          isStanard ? "达标" : "不达标"
        }}</Tag>
      </p>
      <a
        href="#"
        slot="extra"
        style="margin-right: 10px"
        @click.prevent="exportNotStanard()"
        >导出失分项</a
      >
      <a
        :href="printSrc"
        target="_blank"
        style="margin-right: 10px"
        slot="extra"
        >模板</a
      >

      <a href="#" slot="extra" @click.prevent="PrintReport()">打印</a>
      <Table
        border
        :columns="tableTitle"
        :data="tableData"
        :loading="tableLoading"
        ref="table"
        :height="tableHeight"
      ></Table>
    </Card>
    <Modal :mask-closable="false" footer-hide v-model="modalImg" width="800">
      <viewer :images="itemImgs" v-if="modalImg">
        <Carousel :height="600">
          <CarouselItem v-for="item in itemImgs" :key="item">
            <div class="divItemImg">
              <img :src="item" class="itemImg" />
            </div>
          </CarouselItem>
        </Carousel>
      </viewer>
    </Modal>
    <iframe
      id="iframe-print"
      frameborder="0"
      style="display: none"
      scrolling="auto"
      :src="printSrc"
    ></iframe>
  </div>
</template>
<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer/src/component.vue";
import excel from "@/libs/excel";
import { Message, Modal } from "view-design";
import { printUrl } from "@/libs/util";
import { GetXFYAssessInfoHasImg, GetXFYItemImg } from "@/api/xfy";
export default {
  name: "search_xfy_info",
  data() {
    return {
      tableLoading: false,
      tableHeight: 450,
      total: 0,
      pPage: 1,
      pSize: 50,
      exportLoading: false,
      groupname: "",
      xfyinfo: {},
      isNew: false,
      modalImg: false,
      itemImgs: [],
      modalRemark: false,
      pringtTitle: "",
      personTemp: {},
      tableTitle: [
        {
          title: "评查内容",
          key: "ItemName",
          align: "center",
          children: [
            {
              title: "评定指标",
              key: "ItemParentType",
              align: "center",
              width: 200,
            },
            {
              title: "评定指标2",
              key: "ItemParentType2",
              align: "center",
              minWidth: 200,
            },
            {
              title: "基本要求",
              key: "ItemName",
              align: "center",
              minWidth: 300,
            },
          ],
        },
        {
          title: "评查结果",
          key: "ItemName",
          width: 220,
          align: "center",
          children: [
            {
              title: "达标",
              align: "center",
              width: 110,
              render: (h, params) => {
                return h("span", {}, params.row.IsStandard == 1 ? "✔" : "");
              },
            },
            {
              title: "不达标",
              align: "center",
              width: 110,
              render: (h, params) => {
                return h("span", {}, params.row.IsStandard == 1 ? "" : "✔");
              },
            },
          ],
        },
        {
          title: "备注",
          key: "Remark",
          minWidth: 100,
          align: "center",
        },
        {
          title: "图片",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small",
                },
                style: {
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.GetXFYItemImg(params.row.Gid);
                  },
                },
              },
              "查看"
            );
          },
        },
      ],
      tableData: [],
      printSrc: printUrl + "printxfyreport.html",
    };
  },
  props: {
    id: {
      type: String,
      required: true,
    },
    name: {
      type: String,
      required: true,
    },
  },
  components: {
    Viewer,
  },
  methods: {
    GetXFYAssessInfoHasImg() {
      this.tableLoading = true;
      GetXFYAssessInfoHasImg(this.id).then((res) => {
        this.tableLoading = false;
        const data = res.data;
        if (data.Type == 1) {
          this.xfyinfo = data.Data;
          this.tableData = data.Data.info;
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },

    GetXFYItemImg(id) {
      let vm = this;
      GetXFYItemImg(id).then((res) => {
        const data = res.data;
        vm.itemImgs = [];
        if (data.Type == 1) {
          if (data.Data) {
            data.Data.forEach((e) => {
              vm.itemImgs.push(e.ImgUrl);
            });
            if (vm.itemImgs.length > 0) {
              vm.modalImg = true;
            } else {
              this.$Message.success("暂无图片");
            }
          } else {
          }
        } else {
          this.$Modal.error({ title: "提示", content: data.Message });
        }
      });
    },
    PrintReport() {
      document
        .getElementById("iframe-print")
        .contentWindow.printData(this.xfyinfo);
    },
    exportNotStanard() {
      const params = {
        title: ["序号", "不达标项目", "备注"],
        key: ["ItemNoStr", "ItemName", "Remark"],
        data: this.NotStanard,
        autoWidth: true,
        filename: this.name + "失分项汇总",
      };
      excel.export_array_to_excel(params);
    },
  },
  computed: {
    NotStanard() {
      return this.tableData.filter((x) => x.IsStandard != 1);
    },
    isStanard() {
      var list = this.tableData.filter(
        (x) => x.IsStandard != 1 && x.IsTitle == 0
      );
      if (list && list.length > 0) {
        return false;
      } else {
        return true;
      }
    },
  },
  created() {},
  mounted() {
    this.tableHeight = window.innerHeight - 260;
    this.GetXFYAssessInfoHasImg();
  },
};
</script>
